import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

import provider from "@/providers/index.ts";

import "@comp/favorite-item-group.ts"
import "@comp/favorite-item.ts"

// 使用 @customElement 装饰器定义组件名称
@customElement('ai-favorite-view')
export class AiFavoriteView extends LitElement {

  static styles = css`
      :host {
          display: flex;
          flex-direction: column;
          padding: 16px 0 0 0;
          width: 100%;
          height: calc(100vh - 130px);
      }

      .scrollable-div{
          display: flex;
          flex-direction: column;
          font-family: Arial, sans-serif;
          gap: 20px;
          overflow-y: auto; /* 垂直滚动条 */
      }
      /* 自定义滚动条样式 */
      .scrollable-div::-webkit-scrollbar {
          width: 8px; /* 滚动条宽度 */
      }
      .scrollable-div::-webkit-scrollbar-track {
          background: #f1f1f1; /* 滚动条轨道背景色 */
          border-radius: 4px;
      }
      .scrollable-div::-webkit-scrollbar-thumb {
          background: #888; /* 滚动条滑块背景色 */
          border-radius: 4px;
      }
      .scrollable-div::-webkit-scrollbar-thumb:hover {
          background: #555; /* 滚动条滑块悬停背景色 */
      }
  `;

  // 定义组件的渲染逻辑
  render() {
    return html`
      <div class="scrollable-div">
        <!--AI助手工具-->
        <favorite-item-group title="AI助手">
          ${provider.helperAi.map(favorite => {
            return html`
              <favorite-item
                  title="${favorite.name}"
                  description="${favorite.detail}"
                  href="${favorite.url}"
                  iconPath="${favorite.icon}"
              ></favorite-item>
            `;
          })}
        </favorite-item-group>

        <!--AI音乐工具-->
        <favorite-item-group title="AI音乐创作">
          ${provider.musicAi.map(favorite => {
            return html`
              <favorite-item
                  title="${favorite.name}"
                  description="${favorite.detail}"
                  href="${favorite.url}"
                  iconPath="${favorite.icon}"
              ></favorite-item>
            `;
          })}
        </favorite-item-group>

        <!--AI图片工具-->
        <favorite-item-group title="AI图片生成">
          ${provider.pictureAi.map(favorite => {
            return html`
              <favorite-item
                  title="${favorite.name}"
                  description="${favorite.detail}"
                  href="${favorite.url}"
                  iconPath="${favorite.icon}"
              ></favorite-item>
            `;
          })}
        </favorite-item-group>
      </div>

    `;
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'ai-favorite-view': AiFavoriteView;
  }
}